<template>
  <div>App根组件 ---{{color}}--{{count}}</div>
  <button type="button" class="btn btn-success" @click="color='blue'"> change blue</button>
  <level-one></level-one>
</template>

<script>
import LevelOne from './LevelOne.vue';
// 1.导入 computed
import { computed } from 'vue';
export default {
  name: 'MyApp',
  data() {
    return {
      color: 'red',
      count: 0
    };
  },
  provide() {
    return {
      color: computed(() => this.color),
      // 2.通过 computed 函数将数据返回 响应式
      num: computed(() => this.count)
    };
  },
  components: {
    LevelOne
  }
};
</script>

<style>
</style>